
class Enlarge {
    constructor(el) {
        this.el = document.querySelector(el)
        this.imgObj = this.el.querySelector('.img')
        this.maskObj = this.el.querySelector('.mask')
        this.enlargeObj = this.el.querySelector('.enlarge')
        this.init()
    }
    init() {
        this.overOut()
        this.maskMove()
    }

    overOut() {
        this.imgObj.onmouseover = () => {
            this.maskObj.style.visibility = this.enlargeObj.style.visibility = 'visible'
        }
        this.imgObj.onmouseout = () => {
            this.maskObj.style.visibility = this.enlargeObj.style.visibility = 'hidden'

        }

    }
    maskMove() {
        this.imgObj.onmousemove = (evt) => {
            let e = evt || window.event
            let left = e.pageX - this.el.offsetLeft - this.maskObj.offsetWidth / 2
            let top = e.pageY - this.el.offsetTop - this.maskObj.offsetHeight / 2
            if (left < 0) left = 0
            if (top < 0) top = 0
            let maxLeft = this.imgObj.clientWidth - this.maskObj.offsetWidth
            let maxtop = this.imgObj.clientHeight - this.maskObj.offsetHeight
            if (left >= maxLeft) left = maxLeft
            if (top >= maxtop) top = maxtop
            this.maskObj.style.left = left + 'px'
            this.maskObj.style.top = top + 'px'
            this.tbEnlarge(left, top)


        }
    }
    tbEnlarge(left, top) {
        // this.enlargeObj.style.left = left * 2 + 'px'
        // this.enlargeObj.style.top = top * 2 + 'px'
        this.enlargeObj.style.backgroundPosition = `-${left * 2}px -${top * 2}px`
    }


}
export default Enlarge